<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3 Demo</title>
    <script src="https://cdn.staticfile.net/vue/3.5.12/vue.global.js"></script>
</head>

<body>
    <div style="text-align: center;" id="Application">

        <!-- {{ 这是vue的变量替换功能 }} -->
        <h1>{{ count }}</h1>
        <button v-on:click="clickButton">点击</button>
    </div>
    <script>

        // https://unpkg.com/vue@next
        // vue.global.js（完整版，包含编译器和运行时）

        // 原文中用的是这个
        // https://unpkg.com/vue@3/dist/vue.global.js

        // 版本可能还会有最新的，可以从国内找CDN
        // https://cdn.staticfile.net/vue/3.5.12/vue.global.js

        // 注意下面的变量拼写错误是不一定会报错的，但是结果就不对了
        // 定义一个Vue组件, 名为App
        const App = {
            // 定义组件中的数据
            data() {
                return {
                    // 目前我们只用到count数据
                    count: 0
                }
            },

            // 定义组件中的函数
            methods: {
                // 实现点击按钮的方法
                clickButton() {
                    this.count = this.count + 1
                }
            }
        }

        // 将Vue组件绑定到页面上id为Application的元素上
        Vue.createApp(App).mount("#Application")
    </script>
</body>

</html>